<template>
    <div id="calender">
        <div class="calenderTitle flex">
            <div>
				<span>{{year}}年{{month<10?'0'+month:month}}月</span>
				<span @click="prev"><i class="el-icon-arrow-left topIcon pointer"></i></span>
				<span @click="next"><i class="el-icon-arrow-right topIcon pointer"></i></span>
			</div>
			<div @click="getCurrentDate" class="pointer">回到今天</div>
        </div>
		<div class="calenderBox">
			<div class="week">
				<div class="weekTitle calenderBlock" v-for="(item, index) in weekList" :key="`${index}`">{{ item }}</div>
			</div>
			<div class="date">
				<div class="calenderBlock calenderDay noCurrentMonthDay" v-for="(item, index) in prevMonthDay" :key="`${item}${index}0`">
					<p class="calenderText"><span>{{ item }}</span></p>
					<div class="scheduleList"></div>
				</div>
				<div class="calenderBlock calenderDay" v-for="(item, index) in monthDay[month - 1] " :key="`${index}1`" @click="selectDay(item)">
					<p class="calenderText currentDayList" :style="activeDay == item ? activeStyle : ''" :class="scheduleList[index] == item ? 'schedule' : ''">
						<span :class="activeDay == item ? 'activeToDay' : day == item?'toDay':''">{{ day == item ? '今' : item }}</span>
					</p>
					<div class="scheduleList">
						<div v-if="scheduleList && scheduleList.length > 0">
							<ul class="scheduleListUl" v-if="scheduleList[index] && scheduleList[index].scheduleListEntityList.length > 0">
								<li class="scheduleListLi" v-for="(item, i) in scheduleList[index].scheduleListEntityList" :key="i" v-show="i<2">{{ item.title }}</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="calenderBlock calenderDay noCurrentMonthDay" v-for="(item, index) in nextMonthDay" :key="`${item}${index}2`">
					<p class="calenderText"><span>{{ item }}</span></p>
					<div class="scheduleList"></div>
				</div>
			</div>
		</div>
    </div>
</template>

<script>
    export default {
        name: "calender",
        data(){
            return{
                year: '', // 当前年份
                month: '', // 当前月份
                day: '', // 当前天数
                current: '', // 当前时间
                weekList:['一','二','三','四','五','六','日'],
                monthDay:[31,'',31,30,31,30,31,31,30,31,30,31],
                activeDay: '', // 选中的日期
                firstSpaceDay: '', // 每个月第一天是星期几
				lastSpaceDay: '', // 每个月最后一天是星期几
				prevMonthDay: [], // 前一个月的最后几天
				nextMonthDay: [], // 后一个月的前几天
                // February:'' ,// 判断2月份的天数
				scheduleList: '',
				userId: '',
				activeStyle: {
					background: '#23B14D',
					color: '#FFFFFF'
				},
				// 当前日期
				currentDate: ''
            }
        },
		mounted() {
			let store = this.$store.state.user
			this.userId = store.userInfo.id
			this.getCurrentDate()
		},
        methods:{
			selectDay: function(day){
				// 手动选择日期
				this.activeDay = day
				this.currentDate = `${this.year}-${this.month<10?'0'+this.month:this.month}-${day<10?'0'+day:day}`
				console.log(this.currentDate)
				this.$parent.$data.addScheduleForm.date = this.currentDate
				this.getScheduleByDay(this.year, this.month, day)
			},
			getScheduleByDay: function(year, month, day = ''){
				// 获取当日日程
				this.$request.postForm(this.$api.getScheduleByDate, {
					date: `${year}-${month<10?'0'+month:month}-${day<10?'0'+day:day}`,
					userId: this.userId
				}).then( res => {
					if(res.code == 200){
						// 给父组件日程列表数据赋值
						let data =  res.data
						this.$parent.$data.scheduleDataList = data
						// console.log(data)
					}
				})
			},
			getAnalysis: function(year, month, day = this.monthDay[this.month]){
				// 获取当月日程安排
				this.$request.get(this.$api.getAnalysis, {
					year: year,
					month: month<10?'0'+month:month,
					day: day<10?'0'+day:day,
					userId: this.userId
				}).then( res => {
					if(res.code == 200){
						let data =  res.data
						this.$parent.$data.scheduleArrange = data
						// console.log(data)
					}
				})
			},
			getScheduleMonth: function(year, month){
				// 获取月份日程
				this.$request.postForm(this.$api.getScheduleOfMonth, {
					year: year,
					month: month<10?'0'+month:month,
					userId: this.userId
				}).then( res => {
					if(res.code == 200){
						// 给父组件日程列表数据赋值
						let data = this.scheduleList =  res.data
					}
				})
			},
			getCurrentDate: function(){
				// 获取当前时间
				let date = this.current = new Date()
				this.year = date.getFullYear() // 年
				this.month = date.getMonth() + 1 // 月
				this.day = date.getDate() // 日
				this.activeDay = this.day
				this.currentDate = `${this.year}-${this.month<10?'0'+this.month:this.month}-${this.day<10?'0'+this.day:this.day}`
				this.getScheduleMonth(this.year, this.month)
				this.getScheduleByDay(this.year, this.month, this.day)
				this.getAnalysis(this.year, this.month, this.day)
				this.ifIsBissextile()
			},
			ifIsBissextile: function(){
				// 判断是否是闰年
				if(this.year % 4 == 0 && this.year % 100 != 0 || this.year % 400 == 0){
					// 闰年
					this.monthDay.splice(1,1,29)
				} else {
					// 平年
					this.monthDay.splice(1,1,28)
				}
				this.getMonthFisrtDay()
				this.getMonthLastDay()
			},
			getMonthFisrtDay: function(){
				// 判断月份的第一天是星期几
			    let firstDayOfCurrentMonth = new Date(this.year,this.month-1,1) // 某年某月的第一天
				let week = ''
				this.prevMonthDay = []
			    if(firstDayOfCurrentMonth.getDay() == 0){
			        week = 6
			    } else {
			        week = firstDayOfCurrentMonth.getDay() - 1
			    }
				// 拿到前一个月的天数
				let firstMonth = ''
				if(this.month == 1){
					firstMonth = 11
				} else {
					firstMonth= this.monthDay[this.month - 2] // getMonth是从0开始算，this.month-1是当月，上月-2
				}
				// 由于排版关系 week = 6 即firstDayOfCurrentMonth.getDay() = 0   为星期天 所以这里算法week-1
				for (let i = (firstMonth - (week - 1)); i <=firstMonth;i++ ) {
					this.prevMonthDay.push(i)
				}
			},
			getMonthLastDay: function(){
				// 判断月份的最后一天是星期几
				let lastDayOfCurrentMonth = new Date(this.year,this.month,0) // 某年某月的最后一天
				let week = ''
				this.nextMonthDay = []
				if(lastDayOfCurrentMonth.getDay() == 0){
				    week = 6
				} else {
				    week = lastDayOfCurrentMonth.getDay() - 1
				}
				// 下一个月是直接从一号开始
				for (let i = 1; i <= (6 - week);i++ ) {
					this.nextMonthDay.push(i)
				}
			},
			prev(){
				// 上月
			    if(this.month==1){
			        this.year--
			        this.month=12
			    }else{
			        this.month--
			    }
			    this.activeDay = -1
				this.day = -1
				if(this.year == this.current.getFullYear() && this.month == this.current.getMonth() + 1){
					this.getCurrentDate()
				} else {
					this.getScheduleMonth(this.year, this.month)
					this.getAnalysis(this.year, this.month)
				}
			    this.ifIsBissextile()
			},
			next(){
				// 下月
			    if(this.month==12){
			        this.year++
			        this.month=1
			    }else{
			        this.month++
			    }
			    this.activeDay = -1
				this.day = -1
				if(this.year == this.current.getFullYear() && this.month == this.current.getMonth() + 1){
					this.getCurrentDate()
				} else {
					this.getScheduleMonth(this.year, this.month)
					this.getAnalysis(this.year, this.month)
				}
			    this.ifIsBissextile()
			}
        }
    }
</script>

<style scoped>
	#calender{
		background: #FFFFFF;
		/* padding: 20px; */
	}
	.flex{
		display: flex;
		flex-wrap: nowrap;
	}
	.pointer{
		cursor: pointer;
	}
	.calenderBox{
		font-size: 0;
	}
	.calenderTitle{
		width: 100%;
		justify-content: space-between;
		/* margin-bottom: 20px; */
		color: #333333;
		font-weight: bold;
		padding: 20px;
	}
	.calenderTitle span{
		margin-right: 10px;
	}
	.topIcon,.weekTitle{
		color: #333333;
		font-weight: bold;
	}
	.week{
		margin-bottom: 20px;
	}
	.calenderBlock{
		display: inline-block;
		width: calc(100% / 7);
		text-align: center;
		cursor: default;
		font-size: 14px;
		vertical-align: text-top;
	}
	
	.calenderDay{
		/* height: 40px; */
		line-height: 22px;
		margin-top: 10px;
	}
	.calenderText{
		width: 22px;
		height:22px;
		position: relative;
		left: 0;
		right: 0;
		margin: auto;
		border-radius: 100%;
	}
	.currentDayList:hover{
		background: rgba(35,177,77,0.3);
		color: #FFFFFF;
		cursor: pointer;
	}
	.noCurrentMonthDay{
		color: #C2C2C2;
	}
	.toDay{
		color: #23B14D;
	}
	.activeToDay{
		color: #FFFFFF;
	}
	/* .active{
		background: #23B14D;
		color: #FFFFFF;
	} */
	.schedule::after{
		content: '●';
		position: absolute;
		color: orangered;
		top: -15px;
		right: 0;
	}
	.scheduleList{
		width: 100%;
		height: 50px;
		/* background: #1C85C1; */
		padding: 4px;
	}
	.scheduleListUl,.scheduleListLi{
		width: 100%;
	}
	.scheduleListLi{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #808080;
		font-size: 10px;
		position: relative;
		padding-left: 5px;
	}
	.scheduleListLi::before{
		content: '';
		position: absolute;
		width: 3px;
		height: 3px;
		background: #23B14D;
		left: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		border-radius: 100%;
	}
</style>